<template>
    <div :class="['t-panel', (hasTitle===false?'no-title':'')]">
        <div class="title-wrapper" v-if="hasTitle || hasTitle ==null">
        <div class="t-panel-title">
                <slot name="title"></slot>
                <i @click="toggleExpand" :class="['expand', innerExpand ? 'el-icon-arrow-down':'el-icon-arrow-up']" v-show="expandable"></i>
                <div class="flag" :style="{'background-color': innerColor}"></div>
            </div>
        </div>
        <el-collapse-transition>
        <div class="t-panel-body" v-show="innerExpand">
            <slot name="body"></slot>
        </div>
        </el-collapse-transition>
    </div>
</template>
<script>
export default {
    name: "panel",
    props: ["expand", "expandable", "color", "hasTitle"],
    data() {
        return {
            innerExpand: !this.expandable ? true : this.expand,
            innerColor: this.color || "green"
        }
    },
    methods: {
        toggleExpand() {
            this.innerExpand = !this.innerExpand;
        }
    }
}
</script>
<style>
    .t-panel {
        background-color: #fff;
        border-radius: 4px;
        position: relative;
        /*box-shadow: 5px 5px 2px #888888;*/
        padding-top: 14px;
        margin-bottom: 16px;
        padding-bottom: 2px;
        border: 1px solid #e4e4e4;
    }

    .t-panel .expand{
        position: absolute;
        top: 14px;
        right: 12px;
    }

    .t-panel .flag {
        position: absolute;
        left: 0;
        top: 9px;
        height: 30px;
        width: 2px;
    }

    .t-panel .title-wrapper {
        padding: 0 12px;
        margin-left: -1px;
        margin-bottom: 14px;
    }
    .t-panel .t-panel-title {
        /* padding-bottom: 6px;  */
        font-size: 16px;
    }

    .t-panel .t-panel-body {
        margin: 0 12px;
        border-top: 1px solid #e4e4e4;
        padding-top: 15px;
        padding-bottom: 14px;
    }

    .t-panel.no-title .t-title {

    }
    .t-panel.no-title .t-panel-body{
        border-top: none;
        padding-top: 0;
    }
</style>
